<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>详情分析</span>
    </div>
    <el-radio-group v-model="caldate" size="medium">
      <el-radio-button label="今日"></el-radio-button>
      <el-radio-button label="本周"></el-radio-button>
      <el-radio-button label="本月"></el-radio-button>
    </el-radio-group>
    <el-date-picker
      v-model="date"
      type="datetimerange"
      range-separator="-"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
    ></el-date-picker>
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <i class="circle"></i>
          <div class="num">
            <span>30个</span>
            <span>粉丝数</span>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <i class="circle"></i>
          <div class="num">
            <span>22%</span>
            <span>粉丝累计阅读量</span>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <i class="circle"></i>
          <div class="num">
            <span>1.2元</span>
            <span>粉丝收益</span>
          </div>
        </div>
      </el-col>
    </el-row>
    <div>
      <span>头条粉丝</span>
      <div ref="fansNum" class="fansNum"></div>
    </div>
    <el-row :gutter="20">
     <el-col :span="12" class="picdata">
        <span>图文数据</span>
         <div class="grid-content bg-purple" ref="picdata"></div>
      </el-col>
      <!-- <el-col :span="12" class="picdata">
        <span>图文数据</span>
        <div class="grid-content bg-purple" ref="picdata"></div>
      </el-col> -->
    </el-row>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      caldate: "今日",
      date: []
    };
  },
  mounted() {
    var echarts = require("echarts");
    var fansChart = echarts.init(this.$refs.fansNum);
    var picChart = echarts.init(this.$refs.picdata);
    fansChart.setOption({
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
      },
      yAxis: {
        type: "value"
      },
      series: [
        {
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: "line",
          smooth: true
        }
      ]
    });
    picChart.setOption({
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b}: {c} ({d}%)"
      },
      series: [
        {
          name: "访问来源",
          type: "pie",
          radius: ["50%", "70%"],
          avoidLabelOverlap: false,
          label: {
            normal: {
              show: false,
              position: "center"
            },
            emphasis: {
              show: true,
              textStyle: {
                fontSize: "30",
                fontWeight: "bold"
              }
            }
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data: [
            { value: 335, name: "图文数据1" },
            { value: 310, name: "图文数据2" },
            { value: 234, name: "图文数据3" },
            { value: 135, name: "图文数据4" },
            { value: 1548, name: "图文数据5" }
          ]
        }
      ]
    });
  }
};
</script>

<style lang="less" scoped>
.el-date-editor {
  margin-left: 50px;
}
.el-row {
  margin: 30px 0px;
  .el-col {
    height: 112px;
    padding: 0px 20px !important;
    .grid-content {
      background-color: #eee;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .circle {
        display: block;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-color: #f00;
      }
      .num {
        margin-left: 20px;
        font-size: 18px;
        span {
          display: block;
        }
      }
    }
  }
}
.fansNum {
  height: 300px;
}
.picdata {
  height: 230px !important;
  margin-bottom: 20px;
  .grid-content {
    background-color: #fff !important;
  }
}
</style>